<template>
  <div id="unbatchInspection_check">
    <root name="unbatchInspection_check">
      <SafeHeader
        v-bind="{
          title: '批量质检',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-row class="ma-0 mb-4">
        <v-col
          cols="12"
          class="card-title"
          style="padding-bottom: 8px; padding-top: 8px"
          >待检任务列表</v-col
        >
      </v-row>
      <!-- <v-row class="ma-0 mb-4">
      <v-divider inset></v-divider>
      </v-row> -->
      <div class="lineThree"></div>
      <v-container width:80%>
        <v-card
          class="mx-auto my-2 list_card"
          max-width="374"
          outlined
          style="board: thin solid #cacbcc"
          v-for="(item, index) in warehouseOrderList"
          :key="index"
        >
          <!-- <v-divider class="my-0 card-sp-line"></v-divider> -->

          <v-card-text>
            <v-row class="d-flex flex-row justify-space-between">
              <v-col cols="4" class="py-1 card-lable">收货单号</v-col>
              <v-col class="ms-2 py-1 card-value">
                {{ item.acceptRecordCode }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >收货时间</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ item.acceptTime }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999">物料</v-col>
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ item.itemCode }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999">批次</v-col>
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ item.batchName }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >收货数量</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ item.quantity }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >合格数量</v-col
              >
              <v-col
                class="ms-2 py-1"
                cols="2"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ plqualityForm.qualifiedQuantity }}
              </v-col>
              <v-col class="py-1" cols="5">
                <v-checkbox
                  v-model="checkbox"
                  label="全部合格"
                  @change="change(checkbox)"
                ></v-checkbox>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >让步数量</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ plqualityForm.concessionQuantity }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >不合格数量</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ plqualityForm.fiedQuantity }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >异常单号</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ plqualityForm.abnormalBillNo }}
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4" class="py-1" style="color: #999999"
                >特采单号</v-col
              >
              <v-col
                class="ms-2 py-1"
                style="font-size: 0.75rem; color: #666666"
              >
                {{ plqualityForm.especiallyBillNo }}
              </v-col>
            </v-row>
          </v-card-text>
          <v-divider class="my-0 card-sp-line"></v-divider>
          <div
            style="text-align: center; margin: 10px 0"
            v-show="checkbox == '1' ? (IsCheckbox = false) : true"
          >
            <v-btn
              style="
                padding: 0 60px;
                background-color: #627aec;
                border-radius: 40px;
                margin-left: 20px;
                color: #fff;
              "
              @click="checkBtn(item)"
              >质检</v-btn
            >
          </div>
        </v-card>
        <v-row style="position: fixed; bottom: 0; width: 100%">
          <v-col cols="12" style="">
            <v-btn
              class="wms-submit-btn"
              style="background-color: #193690; width: 100%; color: #fff"
              @click="submitBtn(qualityForm)"
              >提交</v-btn
            >
          </v-col>
        </v-row>
        <!-- 弹窗 -->
        <v-dialog v-model="showBoxInfoDialog" max-width="600">
          <v-card class="box_top_content_dialogCard">
            <v-card-title class="box_top_content_dialogCard_title">
              质检
            </v-card-title>
            <v-card-text style="padding: 8px">
              <v-container>
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料编码</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            GobackBillNo
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料名称</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            qualityForm.itemName
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable">批次</v-col>
                          <v-col class="py-1 card-value">{{
                            qualityForm.batchName
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable">数量</v-col>
                          <v-col class="py-1 card-value">{{
                            qualityForm.quantity
                          }}</v-col>
                        </v-row>

                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="15" sm="6">
                            <v-radio-group v-model="qualityForm.qcResult" row>
                              <v-radio label="合格" value="1"></v-radio>
                              <v-radio label="不合格" value="0"></v-radio>
                              <v-radio label="让步" value="2"></v-radio>
                            </v-radio-group>
                          </v-col>
                        </v-row>

                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" sm="6">
                            <v-text-field
                              label="合格数量"
                              persistent-hint
                              v-model="qualityForm.qualifiedQuantity"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="4" sm="6">
                            <v-text-field
                              label="不合格数量"
                              persistent-hint
                              v-model="qualityForm.fiedQuantity"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="4" sm="6">
                            <v-text-field
                              label="让步数量"
                              persistent-hint
                              v-model="qualityForm.concessionQuantity"
                            ></v-text-field>
                          </v-col>
                          <!-- <v-col cols="4" class="py-1 card-lable">数量</v-col> -->
                          <!-- <v-col class="py-1 card-value">{{
                                    32432432
                                  }}</v-col> -->
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" sm="6">
                            <v-text-field
                              label="异常单号"
                              persistent-hint
                              v-model="qualityForm.abnormalBillNo"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="4" sm="6">
                            <v-text-field
                              label="特采单号"
                              persistent-hint
                              v-model="qualityForm.especiallyBillNo"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                      </v-card-subtitle>
                      <div style="text-align: center; margin: 10px 0">
                        <v-btn
                          style="
                            padding: 0 60px;
                            background-color: #627aec;
                            border-radius: 40px;
                            margin-left: 20px;
                            color: #fff;
                          "
                          @click="saveBtn(qualityForm)"
                          >保存</v-btn
                        >
                      </div>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>
          </v-card>
        </v-dialog>
      </v-container>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import { mdiCreditCardScan } from "@mdi/js";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
// import _ from "lodash";
import { apiList } from "@/static/apiList";
// import Storage from "@/utils/storage.js";

export default {
  name: "unbatchInspection_check",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      IsCheckbox: false, //判断点击全部合格复选框 隐藏质检按钮
      column: null,
      qcResult: "",
      // 容器详情弹框
      showBoxInfoDialog: false,
      checkbox: "1",
      warehouseOrderList: [],
      //默认屏幕高度
      docmHeight: document.documentElement.clientHeight,
      //实时屏幕高度
      showHeight: document.documentElement.clientHeight,
      //隐藏或显示下方按钮
      hidshow: true,

      mdiCreditCardScan: mdiCreditCardScan,

      overlay: false,
      taskInput: true,
      tab: null,
      dialog: false,
      //   任务标签表单
      taskFrom: {
        billNo: "",
        itemCode: "", //通过物料编码查询
        supplierName: "",
        expectTime: "",
        asnState: "",
        //   任务页面列表
        taskList: [],
      },
      GobackBillNo: this.$root.api.api.pageParam.billNo,
      //   过渡对象
      oldReceipFrom: {
        // 收货单数据
        receiptList: [],
      },
      //   表单数据
      receiptDialogFrom: {
        quantity: "",
        generate: "",
        cell: "",
      },
      // 质检弹窗数据
      qualityForm: {
        quantity: "", //数量
        batchName: "", //批次
        qcResult: "", // 质检结果 0不合格 1合格 2让步
        qualifiedQuantity: "", //合格数量
        fiedQuantity: "", //不合格数量
        concessionQuantity: "", //让步
        abnormalBillNo: "", //异常单号
        especiallyBillNo: "", //特采单号
      },
      plqualityForm: {
        qcResult: "", // 质检结果 0不合格 1合格 2让步
        qualifiedQuantity: "", //合格数量
        fiedQuantity: "", //不合格数量
        concessionQuantity: "", //让步
        abnormalBillNo: "", //异常单号
        especiallyBillNo: "", //特采单号
      },
      subForm: {
        acceptRecordCode: "",
        acceptTime: "",
        itemCode: "",
        batchName: "",
        quantity: "",
      },
      sheet: false,
      //   仓库列表
      cellList: [],

      // cellNum
      generateNum: "",

      // 收货列表
      receiptListData: [],
    };
  },
  created() {
    this.plCheckList();
  },
  methods: {
    submitBtn(qualityForm) {
      console.log(qualityForm);
      this.warehouseOrderList.forEach((item) => {
        this.subForm.acceptRecordCode = item.acceptRecordCode;
        this.subForm.acceptTime = item.acceptTime;
        this.subForm.itemCode = item.itemCode;
        this.subForm.batchName = item.batchName;
        this.subForm.quantity = item.quantity;
      });
      let params = {
        ...qualityForm,
        ...this.subForm,
      };
      wms
        .post({ url: "/qc/records/submit", data: { qcRecordList:params } })
        .then((res) => {
          console.log(res);
        });
    },
    change(checkbox) {
      if (checkbox == true) {
        this.plqualityForm.concessionQuantity = 0;
        this.plqualityForm.fiedQuantity = 0;

        // checkbox == true 循环列表数据 把收货数量赋值给合格数量
        this.warehouseOrderList.forEach((item) => {
          this.plqualityForm.qualifiedQuantity = item.quantity;
        });
      } else {
        console.log(2);
      }
    },
    plCheckList() {
      let params = {
        billNo: this.GobackBillNo,
      };
      // 通过接口获取单号数据和列表
      this.overlay = true;
      wms.get({ url: "/asn/details/qcList", data: params }).then((res) => {
        console.log(JSON.stringify(res.data.data.list));
        if (res.status == 200 && res.data.code == 200) {
          this.warehouseOrderList = res.data.data.list;
          //判断状态是否正确
          let dataObj = res.data.data;
          console.log(JSON.stringify(dataObj));
          if (dataObj.asnState > 2) {
            this.overlay = false;
            console.log("已验收完成");
          }
          this.taskInput = true;
          this.taskFrom.supplierName = dataObj.supplierName;
          this.taskFrom.expectTime = dataObj.expectTime;
          apiList["asnStates"].forEach((item) => {
            if (item.value == dataObj.asnState) {
              this.taskFrom.asnState = item.label;
            }
          });
          // wms
          //   .get({ url: "/asn/details/findByBillNo", data: params })
          //   .then((res) => {
          //     if (
          //       res.status == 200 &&
          //       res.data.code == 200 &&
          //       !_.isEmpty(res.data.data)
          //     ) {
          //       let dataList = res.data.data.list;
          //       // this.taskFrom.taskList = [{

          //       // }]
          //       this.taskFrom.taskList = dataList;
          //     }
          //     this.overlay = false;
          //   });
        } else {
        }
      });
    },
    saveBtn(qualityForm) {
      console.log(qualityForm);
      this.showBoxInfoDialog = false;
      //传入批量质检的列表的接口只需要 合格 不合格 让步 状态 及输入的字段
      this.plqualityForm.qcResult = qualityForm.qcResult;
      this.plqualityForm.qualifiedQuantity = qualityForm.qualifiedQuantity;
      this.plqualityForm.fiedQuantity = qualityForm.fiedQuantity;
      this.plqualityForm.concessionQuantity = qualityForm.concessionQuantity;
      this.plqualityForm.abnormalBillNo = qualityForm.abnormalBillNo;
      this.plqualityForm.especiallyBillNo = qualityForm.especiallyBillNo;
    },

    checkBtn(item) {
      console.log(item);
      this.GobackBillNo = item.billNo; //物料编码
      this.qualityForm.quantity = item.quantity; //数量
      this.qualityForm.batchName = item.batchName; //批次
      this.qualityForm.itemName = item.itemName; //物料名称
      this.showBoxInfoDialog = true;
      //  if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      //     // window.api.sendEvent({
      //     //   name: "unbatchInspection_skip",
      //     //   extra: {
      //     //     billNo: item.billNo,
      //     //   },
      //     // });
      //     window.api.openWin({
      //       name: "unbatchInspection_check",
      //       url: "./unbatchInspection_check.html",
      //       // pageParam: {
      //       //   billNo: item.billNo,
      //       // },
      //     });
      //   } else {
      //     // this.$root.api.api.sendEvent({
      //     //   name: "unbatchInspection_skip",
      //     //   extra: {
      //     //     billNo: item.billNo,
      //     //   },
      //     // });
      //     this.$root.api.api.openWin({
      //       name: "unbatchInspection_check",
      //       url: "./unbatchInspection_check.html",
      //       // pageParam: {
      //       //   billNo: item.billNo,
      //       // },
      //     });
      //   }
    },
  },
  mounted() {
    console.log(this.$root.api.api.pageParam.billNo); //获取到上个页面的单号
  },
  watch: {
    //判断按钮是否显示
    // showHeight: function () {
    //   console.log("111" + this.showHeight + this.docmHeight);
    //   if (this.docmHeight > this.showHeight) {
    //     this.hidshow = false;
    //   } else {
    //     this.hidshow = true;
    //   }
    // },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .v-input--radio-group--row .v-input--radio-group__input {
  justify-content: space-around;
}
::v-deep .v-text-field__details {
  min-height: 0 !important;
}
::v-deep .v-application .mb-4 {
  margin-bottom: 0 !important;
}
::v-deep .v-messages {
  min-height: 0 !important;
}
.lineThree {
  border: 0.6px solid #ebebeb;
}

v-deep .v-application .text-right {
  text-align: left !important;
  z-index: 999;
}
::v-deep .v-input--selection-controls {
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 999;
}
.box_top_content_dialogCard {
  .box_top_content_dialogCard_title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc352;
    color: #fff;
    padding: 12px 24px 8px !important;
  }
  .card-value {
    text-align: end;
  }
}
a {
}
</style>
